"use client"
import React, { useEffect } from 'react';
import type { FormProps } from 'antd';
import {
  Button,
  Form,
  Input,
  Select,
  Switch,
} from 'antd';
import { addShoplist,emitShoplist } from '@/api/http';

interface Iporps{
  title:string,
  itemobj:any,
  onOk:()=>void,
  onCancel:()=>void,
  shuju:any
}

const App = (props:Iporps) => {
  // 点击编辑时，显示编辑弹框，并在弹框中回显编辑的菜单信息
  const [form] = Form.useForm();
  useEffect(()=>{
    form.setFieldsValue(props.itemobj)
  },[])
  const onFinish: FormProps<Iporps>['onFinish'] = (values) => {
    // 添加菜单功能
     if(props.title=="添加"){
       let obj={
        ...values,
        id:new Date().getTime()
       }
       addShoplist(obj)
      //  修改菜单功能
     }else{
      let obj={
        ...props.itemobj,
        ...values
      }
      emitShoplist(obj)
     }
     props.onOk()
     props.shuju()
  };

  return (
    <Form
     form={form}

     onFinish={onFinish}
      style={{ maxWidth: 600 }}
    >
         <Form.Item label="订单标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="作者" name="author" rules={[{ required: true, message: '请输入作者' }]}>
        <Input />
      </Form.Item>
      {/* 进行非空校验，校验通过后才能提交给服务器 */}
      <Form.Item label="期数" name="qi" rules={[{ required: true, message: '请选择期数' }]}>
        <Select>
          <Select.Option value="第一期">第一期</Select.Option>
          <Select.Option value="第二期">第二期</Select.Option>
          <Select.Option value="第三期">第三期</Select.Option>
          <Select.Option value="第四期">第四期</Select.Option>
          <Select.Option value="第五期">第五期</Select.Option>
          <Select.Option value="第六期">第六期</Select.Option>
          <Select.Option value="第七期">第七期</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item label="钱数" name="money" rules={[{ required: true, message: '请输入钱数' }]}>
        <Input />
      </Form.Item>
      {/* 进行非空校验，校验通过后才能提交给服务器 */}
      <Form.Item label="时间" name="time" rules={[{ required: true, message: '请输入时间' }]}>
        <Input />
      </Form.Item>
    
      <Form.Item label="状态" name="state" rules={[{ required: true, message: '请输入时间' }]}>
        <Switch />
      </Form.Item>
    
     
      <Form.Item>
        <Button htmlType='submit'>提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;